/**
 * Created by Administrator on 2017/3/14.
 */
var Slider = require('../../../src/libs/slider');
var Advisory = require('../../../src/libs/advisory');
var HyperLink = require('../../../src/libs/hyperlink');
var Layer = require('../../../src/libs/layer');
var Calculator = require('../../../src/libs/calculator');
var Form = require('../../../src/libs/form');
var Formitem = require('../../../src/libs/form-item');
var Button = require('../../../src/libs/button');
var Input = require('../../../src/libs/input');
var Textarea = require('../../../src/libs/textarea');
var Backtop = require('../../../src/libs/backtop');
var HotItem = require('../complex/hotItem');
var Steps = require('../complex/steps');

var AppDownload = React.createClass({
    getInitialState:function () {
      return{
          URL:PageDM.URL.value
      }
    },
    render:function () {
        var _this = this;
        return (
            <div className="down">
                <a href={_this.state.URL.downloadAndroid} target="_black" className="android"><span className="iconfont icon-android"></span>Android下载</a>
                <a href={_this.state.URL.downloadIOS} target="_black" className="ios"><span className="iconfont icon-ios"></span>iOS下载</a>
            </div>
        )
    }
});

var Banner = React.createClass({
    getInitialState:function() {
        return {
            banners: PageDM.banners.value
        }
    },
    setSelfState:function(obj){
        this.setState(obj);
    },
    render:function(){
        var config = {
            dots: true,
            arrows: true,
            autoPlay: true,
            autoPlaySpeed: 5000
        }
        return(
            <div className="banner-warp">
                <Slider config={config}>
                    {
                        this.state.banners.map(function(item,idx){
                            return (
                                <a href={item.LinkUrl?item.LinkUrl:"javascript:void(0);"} className={idx==0?"ucs-slider-item active-item":"ucs-slider-item"} target={item.OpenMode == 1?"_blank":"_self"} style={{background: "url("+item.PicUrl+")  center 0 no-repeat"}}>
                                    <div className="inner"></div>
                                </a>
                            )
                        })
                    }
                </Slider>
            </div>
        )
    }
});

var Root = React.createClass({
    getInitialState:function(){
        return {
            //banners:PageDM.banners.value,
            projectList:PageDM.projectList.value,
            amount:PageDM.amount.value,
            questions:PageDM.questions.value,
            investment:PageDM.investment.value,
            notices:PageDM.notices.value,
            steps:PageDM.steps.value,
            URL:PageDM.URL.value
        }
    },
    _handleClick: function () {
        this.refs.calculator.layerOpen();
    },
    _feedbackClick: function(){
        var PageDM = window.PageDM;
        this.refs[PageDM.feedback.dmbind].layerOpen();
        this.refs.feedbackForm.reset();
    },
    componentDidMount:function(){
        var _this = this;
        var PageDM = window.PageDM;
        UEventHub.on('LayerOpen',function (v) {
            _this.refs[v].layerOpen();
        });
        UEventHub.on('LayerClose',function (v) {
            _this.refs[v].layerClose();
        });

        //轮播图
        UEventHub.on(PageDM.banners.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.refs.banner.setSelfState({
                banners:v
            });
            /*_this.setState({
                banners:v
            })*/
        });
        //平台公告
        UEventHub.on(PageDM.notices.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                notices:v
            })
        });
        //推荐投资列表
        UEventHub.on(PageDM.projectList.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.refs.hotItem.setState({
                data:{
                    list:v
                }
            })
            /*_this.setState({
                projectList:v
            })*/
        });
        //累计数据
        UEventHub.on(PageDM.amount.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                amount:v
            })
        });
        //最新投资
        UEventHub.on(PageDM.investment.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                investment:v
            })
        });
        //常见问题
        UEventHub.on(PageDM.questions.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                questions:v
            })
        });
        //投资步骤
        UEventHub.on(PageDM.steps.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.refs.steps.setState({
                data:v
            });
            /*_this.setState({
                steps:v
            })*/
        });
        //URL
        UEventHub.on(PageDM.URL.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.refs.appDownload.setState({
                URL:v
            })
        });
        UEventHub.emit("pageLoad","hello world!");
    },
    render: function () {
        var _this = this;

        //累计数据
        var _accumulative = {
            unit:_this.state.amount.unit,
            transaction:_this.state.amount.CumulativeTransactionAmount,
            produce:_this.state.amount.AccumulatedIncome
        };
        //推荐列表
        var _hot_item = {
            moreUrl:_this.state.URL.investList,
            //list:_this.state.projectList
            list:PageDM.projectList.value
        };
        //常见问题
        var _question = {
            moreUrl:_this.state.URL.questions,
            list:_this.state.questions
        };
        //投资步骤
        var _steps = {
            list:_this.state.steps
        };
        //平台公告轮播
        var _noticeScroll = {
            notices: _this.state.notices,
            config: {
                speed: 20,  //滚动速度
                type: 2,    //1：无缝滚动，2：间歇滚动:只有向上滚动的场景
                stopTime: 3000  //间歇滚动停顿时间
            },
            moreUrl: _this.state.URL.notices
        }

        //最新投资
        var _newInvest = {
            list: _this.state.investment,
            config: {
                speed: 33,  //滚动速度
                type: 1    //1：无缝滚动，2：间歇滚动:只有向上滚动的场景
            }
        }

        return (
            <div>
                {/**/}
                <Banner ref="banner"/>

                <HotItem ref="hotItem" data={_hot_item}/>
                <div className="index-app">
                    <div className="wrap">
                        <h2 className="index-title"><b></b>APP下载<b></b></h2>
                        <div className="content">
                            <div className="qrcode"><img src="../content/images/qrcode.jpg" alt=""/></div>
                            <AppDownload ref="appDownload" />
                        </div>
                    </div>
                </div>
                <div className="index-steps">
                    <div className="wrap">
                        <h2 className="index-title"><b></b>只要4步，轻松投资<b></b></h2>
                        <div className="ucs-steps">
                            <Steps ref="steps" data={_steps}/>
                        </div>
                    </div>
                </div>
                <Advisory>
                    <HyperLink href={_this.state.URL.my} text={<div><span className="iconfont icon-my"></span><span className="bg-icon circle"></span><p>我的</p></div>}/>
                    <HyperLink href={_this.state.URL.investList} text={<div><span className="iconfont icon-invest"></span><span className="bg-icon circle"></span><p>投资</p></div>}/>
                    <HyperLink href={_this.state.URL.borrow} text={<div><span className="iconfont icon-loan"></span><span className="bg-icon circle"></span><p>借款</p></div>}/>
                    <p className="line"></p>
                    <HyperLink className="relative" text={
                        <div>
                            <span className="iconfont icon-scan"></span>
                            <span className="hover-tips qrcode"><b></b><img src="../content/images/qrcode.jpg" alt=""/><p>扫一扫</p></span>
                        </div>
                    }/>
                    <HyperLink href={_this.state.URL.notices} className="relative" text={
                        <div>
                            <span className="iconfont icon-message"></span>
                            <span className="hover-tips"><b></b>公告</span>
                        </div>
                    }/>
                    <HyperLink className="relative calculator open-calculator" onClick={this._handleClick.bind(this)} text={
                        <div>
                            <span className="iconfont icon-calculator"></span>
                            <span className="hover-tips"><b></b>计算器</span>
                        </div>
                    }/>
                    <HyperLink className="relative feedback open-feedback" onClick={this._feedbackClick.bind(this)} text={
                        <div>
                            <span className="iconfont icon-feedback"></span>
                            <span className="hover-tips"><b></b>意见反馈</span>
                        </div>
                    }/>
                    <HyperLink className="backtop" text={<Backtop><span className="iconfont icon-top"></span><span>TOP</span></Backtop>}/>
                </Advisory>

                <Calculator ref="calculator" days={PageDM.days.value}/>

                <Layer ref={PageDM.feedback.dmbind} title={<h3 className="ucs-alert-title"><b></b><span>意见反馈</span><b></b></h3>} className="feedback-layer" move={false}>
                    <div className="layer-feedback">
                        <Form ref = "feedbackForm">
                            <p className="tips">您好，欢迎您对新银e融投融资平台提出意见和建议，我们会努力改善和提升用户体验。</p>
                            <Formitem dmbind={PageDM.textarea.dmbind} className="text-area">
                                <Textarea className="ucs-input-control" placeholder="请写下您的宝贵意见" dmbind={PageDM.textarea.dmbind}></Textarea>
                            </Formitem>
                            <div className="clear"></div>
                            <p>请留下您的邮箱，我们会第一时间给您答复。</p>
                            <Formitem dmbind={PageDM.email.dmbind} className="email">
                                <Input placeholder={PageDM.email.placeholder} dmbind={PageDM.email.dmbind}/>
                            </Formitem>
                        </Form>
                        <Button value="确认提交" className="ucs-btn-confirm" onClick={PageDM.feedback.confirmBack}/>
                    </div>
                </Layer>
            </div>
        )
    }
});
ReactDOM.render(<Root/>, document.getElementById('giraffe'));